<template>
  <div class="social-metrics">
    <div class="social-metrics__item">
      <div class="social-metrics__icon">
        <img src="@/assets/share.png" alt="share" />
      </div>
      <div class="social-metrics__label">Shares</div>
    </div>

    <div class="social-metrics__item">
      <div class="social-metrics__icon">
        <img src="@/assets/comments.png" alt="share" />
      </div>
      <div class="social-metrics__label">Comments</div>
    </div>
    <div class="social-metrics__item">
      <div class="social-metrics__icon">
        <img src="@/assets/likes.png" alt="share" />
      </div>
      <div class="social-metrics__label">Likes</div>
    </div>
    <div class="social-metrics__item">
      <div class="social-metrics__icon">
        <img src="@/assets/saves.png" alt="share" />
      </div>
      <div class="social-metrics__label">Saves</div>
    </div>
    <div class="social-metrics__item">
      <div class="social-metrics__icon">
        <img src="@/assets/views.png" alt="share" />
      </div>
      <div class="social-metrics__label">Views</div>
    </div>
    <div class="social-metrics__item" v-if="showType">
      <div class="social-metrics__icon">
        <img src="@/assets/@.png" alt="share" />
      </div>
      <div class="social-metrics__label">Mentions</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    showType: {
      type: Boolean,
      default: true, // 默认显示所有，或根据需求设置
    },
  },
  methods: {
    // 解析 showType 并判断当前项是否可见
  },
};
</script>
<style scoped lang="scss">
.social-metrics {
  height: 0.5139rem;
  border: 1px solid #cdcccc;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  .social-metrics__item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    .social-metrics__icon {
      width: 24px;
      height: 24px;
      margin-right: 8px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .social-metrics__label {
      font-size: 14px;
      font-weight: 400;
      color: #454545;
    }
  }
}
</style>
